import Module from "@/views/dashboard/data/components/Module";
import bg1 from "./assets/4296.webp";
import icon1 from "./assets/bxs-planet.svg";
import icon2 from "./assets/games_24px_rounded.svg";
import icon3 from "./assets/bxs-extension.svg";
import { defineComponent } from "vue";

export default defineComponent({
	name: "InfoBuild",
	setup() {
		return () => (
			<Module title={"信息化建设"}>
				<div class={"w-full h-full flex flex-col items-center justify-center p-4 pt-6 box-border"}>
					<div class={"w-full h-1/3 flex flex-row justify-between"}>
						<Item1 text={"云"}></Item1>
						<div class={"w-[80%] h-full flex flex-row justify-around item.scss-center"}>
							<Item2 text={"物联平台"} icon={icon1}></Item2>
							<Item2 text={"销售平台"} icon={icon2}></Item2>
							<Item2 text={"运维支持平台"} icon={icon3}></Item2>
						</div>
					</div>
					<div class={"w-full h-1/3 flex flex-row justify-between items-center"}>
						<Item1 text={"路"}></Item1>
						<div class={"w-[80%] h-full flex flex-row justify-around item.scss-center"}>
							<Item3 title={"遍布全球网络节点"} value={"3652"}></Item3>
							<div class={"w-[1px] h-[60%] bg-gray-400 mx-[5%]"}></div>
							<Item3 title={"售后网点"} value={"36980"}></Item3>
						</div>
					</div>

					<div class={"w-full h-1/3 flex flex-row justify-between items-center"}>
						<Item1 text={"端"}></Item1>
						<div class={"w-[80%] h-full flex flex-row justify-around item.scss-center"}>
							<Item3 title={"全国配电房建设"} value={"689"}></Item3>
							<div class={"w-[1px] h-[60%] bg-gray-400"}></div>
							<Item4></Item4>
						</div>
					</div>
				</div>
			</Module>
		);
	}
});

const Item1 = defineComponent({
	name: "Item1",
	props: { text: String },
	setup(props) {
		return () => (
			<div
				class={"w-[46px] h-[46px] text-white text-[20px] text-center leading-[46px] "}
				style={{
					background: "url('" + bg1 + "') no-repeat",
					"background-size": "100% 100%"
				}}
			>
				{props.text}
			</div>
		);
	}
});

const Item2 = defineComponent({
	name: "Item2",
	props: { text: String, icon: String },
	setup(props) {
		return () => (
			<div
				class={"h-fit text-white text-[13px] m-1 p-2 px-4 flex flex-col justify-center items-center rounded-[6px]"}
				style={{
					background: "linear-gradient(180.00deg, #126cb7 0%, #023d9a 100%)"
				}}
			>
				<img class={"h-[24px] w-[24px]"} src={props.icon} alt="" />
				<div class={"h-fit w-fit text-nowrap"}>{props.text}</div>
			</div>
		);
	}
});

const Item3 = defineComponent({
	name: "Item3",
	props: { title: String, value: String },
	setup(props) {
		return () => (
			<div class={"text-white w-[40%]"}>
				<div class={"my-1"}>{props.title}</div>
				<div class={"flex flex-row"}>
					<div class={"text-[22px] text-[#39E2F6]"}>{props.value}</div>
					<div>个</div>
				</div>
			</div>
		);
	}
});

const Item4 = defineComponent({
	name: "Item4",
	setup() {
		return () => (
			<div class={"h-full w-[40%] flex flex-col justify-around"}>
				<div class={"flex flex-row justify-between"}>
					<div class={"text-[#7AFCCC] text-[13px]"}>新建 25%</div>
					<div class={"text-[#9EA7F2] text-[13px]"}>计划 75%</div>
				</div>
				<div class={"flex flex-row justify-between"}>
					<div class={"bg-[#7AFCCC] text-[13px] w-1/4 mr-1 h-[6px]"}></div>
					<div class={"bg-[#9EA7F2] text-[13px] w-3/4 h-[6px]"}></div>
				</div>
			</div>
		);
	}
});
